<template>
    <div class="default-main">
        <div class="dashboard-rows">
            <el-row :gutter="20">
                <el-col :sm="12" :lg="6">
                    <div class="small-panel suspension">
                        <div class="small-panel-content">
                            <div class="content-left">
                                <span id="to-be-assigned">{{ state.woCount.pending }}</span>
                                <Icon color="#F48595" size="20" name="fa fa-question-circle" />
                            </div>
                        </div>
                        <div class="small-panel-title">待分派</div>
                    </div>
                </el-col>
                <el-col :sm="12" :lg="6">
                    <div class="small-panel suspension">
                        <div class="small-panel-content">
                            <div class="content-left">
                                <span id="wo-number">{{ state.woCount.total }}</span>
                                <Icon color="#8595F4" size="20" name="fa fa-commenting-o" />
                            </div>
                        </div>
                        <div class="small-panel-title">工单总数</div>
                    </div>
                </el-col>
                <el-col :sm="12" :lg="6">
                    <div class="small-panel suspension">
                        <div class="small-panel-content">
                            <div class="content-left">
                                <span id="communication">{{ state.woCount.dealing }}</span>
                                <Icon color="#AD85F4" size="20" name="fa fa-ellipsis-h" />
                            </div>
                        </div>
                        <div class="small-panel-title">沟通处理中</div>
                    </div>
                </el-col>
                <el-col :sm="12" :lg="6">
                    <div class="small-panel suspension">
                        <div class="small-panel-content">
                            <div class="content-left">
                                <span id="outstanding-statement">{{ state.woCount.unfinished }}</span>
                                <Icon color="#74A8B5" size="20" name="fa fa-clock-o" />
                            </div>
                        </div>
                        <div class="small-panel-title">总未结单</div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="dashboard-rows">
            <el-row :gutter="20">
                <el-col class="lg-mb-20" :xs="24" :sm="24" :md="24" :lg="24">
                    <el-card shadow="hover">
                        <template #header> 工单趋势 </template>
                        <div class="wo-tendency" ref="tendencyRef"></div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <div class="dashboard-rows">
            <el-row :gutter="20">
                <el-col :sm="12" :lg="8">
                    <div ref="solveRef" class="pie-box suspension"></div>
                </el-col>
                <el-col :sm="12" :lg="8">
                    <el-card class="top10-card suspension" header="工程师接单量TOP10">
                        <el-table class="w100" :data="state.workOrderEngineersTop10">
                            <el-table-column prop="title" label="工程师" />
                            <el-table-column prop="quantity" align="center" label="接单量" />
                        </el-table>
                    </el-card>
                </el-col>
                <el-col v-if="!state.loading" :sm="12" :lg="8">

                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref, reactive, onActivated, onBeforeMount, watch } from 'vue'
import { dashboard } from '/@/api/backend/workorder'
import { CountUp } from 'countup.js'
import * as echarts from 'echarts'
import { useEventListener } from '@vueuse/core'
import { useNavTabs } from '/@/stores/navTabs'
import { pad } from 'lodash-es'
import { log } from 'console'

defineOptions({
    name: 'workorder/dashboard',
})

const navTabs = useNavTabs()
const solveRef = ref()
const pleasedRef = ref()
const tendencyRef = ref()
const state: {
    woCount: anyObj
    tendencyData: anyObj
    averageTime: anyObj
    solved: anyObj[]
    stars: anyObj[]
    loading: boolean
    charts: anyObj[]
    workOrderCategoryTop10: anyObj[]
    workOrderEngineersTop10: anyObj[]
    avgResponseTimeTop10: anyObj[]
} = reactive({
    woCount: {},
    tendencyData: {},
    averageTime: {},
    solved: [],
    stars: [],
    loading: true,
    charts: [],
    workOrderCategoryTop10: [],
    workOrderEngineersTop10: [],
    avgResponseTimeTop10: [],
})

const countUpFun = (id: string) => {
    nextTick(() => {
        let value = document.getElementById(id)?.innerText
        if (value) {
            new CountUp(id, parseInt(value), {
                startVal: 0,
                duration: 3,
            }).start()
        }
    })
}

const initCountUp = () => {
    countUpFun('wo-number')
    countUpFun('communication')
    countUpFun('outstanding-statement')
    countUpFun('to-be-assigned')
}

const initWoTendencyChart = () => {
    const woTendency = echarts.init(tendencyRef.value)
    const option = {
        grid: {
            left: 60,
            top: 30,
            right: 60,
            bottom: 40,
        },
        tooltip: {
            trigger: 'item',
            formatter: '<b>{a}</b> <br/>{b} : {c}单',
        },
        xAxis: {
            data: state.tendencyData.columns,
        },
        yAxis: {},
        legend: {
            data: ['提交量', '结单量'],
            textStyle: {
                color: '#73767a',
            },
        },
        toolbox: {
            show: false,
            feature: {
                magicType: { show: true, type: ['stack', 'tiled'] },
                saveAsImage: { show: true },
            },
        },
        series: [
            {
                name: '提交量',
                data: state.tendencyData.data.submit,
                type: 'line',
                smooth: true,
                areaStyle: {
                    color: '#8595F4',
                },
                emphasis: {
                    label: {
                        show: true,
                    },
                },
                markLine: {
                    data: [{ type: 'average', name: '平均提交量' }],
                },
            },
            {
                name: '结单量',
                data: state.tendencyData.data.done,
                type: 'line',
                smooth: true,
                areaStyle: {
                    color: '#F48595',
                    opacity: 0.5,
                },
                emphasis: {
                    label: {
                        show: true,
                    },
                },
                markLine: {
                    data: [{ type: 'average', name: '平均结单量' }],
                },
            },
        ],
    }
    woTendency.setOption(option)
    state.charts.push(woTendency)
}

const initSolveChart = () => {
    const woSolve = echarts.init(solveRef.value)
    const option = {
        title: {
            text: '解决率占比',
            subtext: '工单提交和解决率占比',
            x: 'center',
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['未解决', '已解决', '待评价'],
        },
        series: [
            {
                type: 'pie',
                center: ['50%', '50%'],
                radius: [0, '30%'],
                label: {
                    position: 'inner',
                },
                data: state.solved,
            },
            {
                type: 'pie',
                radius: ['40%', '55%'],
                data: state.solved,
            },
        ],
    }
    woSolve.setOption(option)
    state.charts.push(woSolve)
}

const initPleasedChart = () => {
    const woPleased = echarts.init(pleasedRef.value)
    const option = {
        title: {
            text: '满意度占比',
            subtext: '工单解决满意度情况',
            x: 'center',
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['1星', '2星', '3星', '4星', '5星', '待评价'],
        },
        series: [
            {
                type: 'pie',
                center: ['50%', '50%'],
                radius: [0, '30%'],
                label: {
                    position: 'inner',
                },
                data: state.stars,
            },
            {
                type: 'pie',
                radius: ['40%', '55%'],
                data: state.stars,
            },
        ],
    }
    woPleased.setOption(option)
    state.charts.push(woPleased)
}

const echartsResize = () => {
    nextTick(() => {
        for (const key in state.charts) {
            state.charts[key].resize()
        }
    })
}

onActivated(() => {
    echartsResize()
})

onMounted(() => {
    state.loading = true
    dashboard()
        .then((res) => {
            state.woCount = res.data.woCount
            state.tendencyData = res.data.tendency
            state.averageTime = res.data.averageTime
            state.solved = res.data.solved
            state.stars = res.data.stars
            state.workOrderCategoryTop10 = res.data.workOrderCategoryTop10
            state.workOrderEngineersTop10 = res.data.workOrderEngineersTop10
            state.avgResponseTimeTop10 = res.data.avgResponseTimeTop10
            initCountUp()
            initWoTendencyChart()
            initSolveChart()
            initPleasedChart()
        })
        .finally(() => {
            state.loading = false
        })

    useEventListener(window, 'resize', echartsResize)
})

onBeforeMount(() => {
    for (const key in state.charts) {
        state.charts[key].dispose()
    }
})

watch(
    () => navTabs.state.tabFullScreen,
    () => {
        echartsResize()
    }
)
</script>

<style scoped lang="scss">
.small-panel {
    background-color: #e9edf2;
    border-radius: var(--el-border-radius-base);
    padding: 20px;
    padding-top: 10px;
    .small-panel-title {
        font-size: 15px;
        color: var(--el-color-info);
    }
    .small-panel-content {
        display: flex;
        align-items: flex-end;
        margin-top: 10px;
        color: #2c3f5d;
        .content-left {
            display: flex;
            width: 100%;
            justify-content: space-between;
            align-items: center;
            font-size: 24px;
            .icon {
                margin-right: 10px;
            }
            span {
                display: inline-block;
                font-size: 28px;
            }
        }
    }
}
.dashboard-rows {
    margin-bottom: 20px;
}
.top10-card {
    :deep(.el-card__body) {
        padding: 10px;
    }
}
.wo-tendency {
    height: 250px;
}
.pie-box {
    background: #ffffff;
    height: 360px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    padding: 20px 20px 0 20px;
}
.response {
    .average-time-h4 {
        margin-bottom: 40px;
        font-weight: bold;
        font-size: 18px;
        color: #666666;
    }
    .average-time {
        margin-top: 20px;
    }
    .average-time-title {
        font-size: 14px;
        color: #999999;
        margin-bottom: 6px;
        display: flex;
        justify-content: space-between;
    }
    .average-time-tis {
        color: #999999;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: justify-all;
        font-size: 14px;
        margin-top: 16px;
    }
    .average-time-tis-p {
        text-align: center;
    }
    .average-time-strpad {
        display: inline-block;
        width: calc(100% - 60px);
        overflow: hidden;
        white-space: nowrap;
        text-align: center;
    }
}
</style>
